<template>
	<view class="scheduling">
		<status-bar :title="$t('showMySchedule')"></status-bar>
		<view class="topWeek">
			<view class="weekBtn row-me column-center margin-bottom30 d-rn d-ac d-jb">
				<view class="font-size30 color202233 margin-left20 margin-right20">
					{{dayList[0].date.substring(0,4)}}{{$t('year')}}{{dayList[0].date.substring(5,7)}}{{ $t('month') }} 
				</view>
				<!-- <view class="btn">下一周</view> -->
			</view>
			<view class="row-me wattTxt d-rn d-ac d-jb">
				<u-icon name="arrow-left" color="#8F9BB3" size="32rpx" class="nexleft" @click="weekClick(-7)"></u-icon>
				<view class="">{{ $t('monday') }}</view>
				<view class="">{{ $t('tuesday') }}</view>
				<view class="">{{ $t('wednesday') }}</view>
				<view class="">{{ $t('thursday') }}</view>
				<view class="">{{ $t('friday') }}</view>
				<view class="">{{ $t('saturday') }}</view>
				<view class="">{{ $t('sunday') }}</view>
				<u-icon name="arrow-right" color="#8F9BB3" size="32rpx" class="nexleft"  @click="weekClick(+7)"></u-icon>
			</view>
			<!-- 7天日期数据 -->
			<view class="row-me dayTxt d-rn d-ac d-jb">
				<view class="box column-me column-center align-center" :class="{'boxBg': item.checked == true}"
					v-for="(item,index) in dayList" :key="index" @click="dayClick(item,index)">
					<view class="font-bold font-size30 color202233 margin-bottom8 d-rn d-ac d-jc">{{item.date.substring(8,10)}}</view>
					<!-- <view class="color6D7984 font-size24">{{item.dates}}</view> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// import lunarCalendar from 'lunar-calendar'
	import moment from "moment";

	export default {
		components: {

		},
		data() {
			return {
				description: this.$t('showMySchedule'),
				nowDate: moment().startOf('week').add(1, 'day'),
				dayList: [], //7天的数据
				dateDay: '', //当前几号
				currentYear: '', // 当前年月日
				currentMonth: '', // 当前年月日
				currentDay: '', // 当前年月日
				// nowDate: moment().startOf('week')
			}
		},
		// 侦听器
		watch: {

		},
		// 计算属性
		computed: {

		},
		//组件创建
		created() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate(); //得到日期
			month = month >= 9 ? month : '0' + month;
			day = day >= 9 ? day : '0' + day;
			this.dateDay = year + '-' + month + '-' + day; //当前年月日
			this.currentYear = year; // 当前年
			this.currentMonth = month; // 当前月
			this.currentDay = day; // 当前日
			this.getList(this.nowDate);
		},
		// 页面加载
		onLoad(e) {

		},
		// 页面显示
		onShow() {

		},
		// 方法
		methods: {
			tabClick(index) {
				this.referIndex = index;
			},
			changeImg(id) {
				if (this.arrList1.includes(id)) {
					//includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
					//filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素：生成新的数组
					this.arrList1 = this.arrList1.filter(function(ele) {
						return ele != id;
					});
				} else {
					this.arrList1.push(id);
				}
				// this.form.time1 = '';
				// this.form.time1 = this.arrList1.join(",");
				console.log(this.arrList1, 'this.arrList1');
			},
			// 点击上一周,下一周
			weekClick(num) {
				this.nowDate = this.nowDate.add(num, 'd')
				this.getList(this.nowDate)
			},
			getList(firstDayOfWeek) {
				const days = [];
				for (let i = 0; i < 7; i++) {
					let date = moment(firstDayOfWeek).add(i, 'day').format('YYYY-MM-DD')
					days.push({
						date: date,
						// dates: lunarCalendar.solarToLunar(date.substring(0, 4), date.substring(5, 7), date
						// 	.substring(8,
						// 		10)).lunarDayName
					});
				}

				for (let item of days) {
					console.log(item, '222222222')
					item.checked = false;
					if (this.dateDay == item.date) {
						item.checked = true;
					}
				}

				this.dayList = days;
				console.log(this.dayList, '159最后的时间数组')
			},
			// 点击清空按钮
			emptyClick() {
				uni.showModal({
					title: this.$t('prompt'),
					content: this.$t('clear_unscheduled_data_confirm'),
					cancelColor: '#353535',
					confirmColor: '#215AA0',
					cancelText: this.$t('cancel'),
					// showCancel: false,
					confirmText: this.$t('picker_confirm'),
					success: function(res) {
						if (res.confirm) {

						} else if (res.cancel) {}
					}
				})
			},
			// 点击头部日期
			dayClick(item1, index) {
				for (let item of this.dayList) {
					item.checked = false;
					this.dayList[index].checked = true;
				}
			},
		},
		// 页面隐藏
		onHide() {

		},
		// 页面卸载
		onUnload() {

		},
		// 触发下拉刷新
		onPullDownRefresh() {

		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {

		},
	}
</script>

<style lang="scss" scoped>
	.scheduling {
		height: 100vh;
		overflow: auto;
		background-color: #F6F7F9;

		.topWeek {
			background-color: #fff;
			padding: 30rpx 0;
			box-sizing: border-box;
			.weekBtn {
				.btn {
					width: 111rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: rgba(33, 90, 160, 0.1);
					border-radius: 20rpx;
					text-align: center;
					font-size: 24rpx;
					color: #215AA0;
				}
			}

			.wattTxt {
				margin: 0 30rpx 10rpx 30rpx;

				view {
					flex: 1;
					text-align: center;
					font-size: 24rpx;
					color: #202233;
				}
			}

			.dayTxt {
				margin: 0 30rpx 10rpx 30rpx;

				.box {
					// flex: 1;
					width: 90rpx;
					// height: 100rpx;
					background: #F6F7F9;
				}

				.boxBg {
					background: #215AA0 !important;

					view {
						color: #FFFFFF !important;
					}
				}

			}
		}
	}
</style>